@mixin fireworks($side: 150px) {
  position: absolute;
  width: $side;
  aspect-ratio: 1 / 1;
  mask: url(../assets/images/fireworks.png) right top no-repeat;
  mask-size: auto $side;
  animation: fireworks 2s steps(24) infinite, random 8s steps(1) infinite,
    random-color 1s infinite;
}
@keyframes fireworks {
  0% {
    mask-position: 0 0;
  }
  50%,
  100% {
    mask-position: 100% 100%;
  }
}
@keyframes random {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200%, 50%) scale(0.8);
  }
  50% {
    transform: translate(80%, 80%) scale(1.2);
  }
  75% {
    transform: translate(20%, 60%) scale(0.65);
  }
}
@keyframes random-color {
  0% {
    background-color: #ffefad;
  }
  25% {
    background-color: #ffadad;
  }
  50% {
    background-color: #aeadff;
  }
  75% {
    background-color: #adffd9;
  }
}
